<extend name="Public/layout" />
<block name="pluginCSS">
	
	  <link rel="stylesheet" href="__PUBLIC__/Home/plugins/layerslider/css/layerslider.css" type="text/css">
    <link rel="stylesheet" href="__PUBLIC__/Home/plugins/layerslider/skins/fullwidth/skin.css" type="text/css">
</block>
<block name="CSS"></block>

<block name="loadJS">
<script src="__PUBLIC__/Home/plugins/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/plugins/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/plugins/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/plugins/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
    
</block>
<block name="setJS">
	<script type="text/javascript" src="__PUBLIC__/Home/scripts/index.js"></script>
  <script>
  var ajaxUrl="<{:U('Cart/addToCart')}>";
  function tog(a){
    $(a). parent('.product-other-images').children('a').removeClass('active');
    $(a).toggleClass('active');    
    $('.product-main-image img').attr('src',$(a).find('img').attr('src'));
    $('.product-main-image img').attr('data-BigImgSrc',$(a).find('img').attr('src'));
    $('.product-main-image').zoom({url: $('.product-main-image img').attr('data-BigImgSrc')});
  }
  function addToCart(goodsId,goodsAttrId){
 
    $.post(ajaxUrl,{goodsId:goodsId,goodsAttrId:goodsAttrId},function(data){
      if(data.totalMoney){
        layer.msg('已成功加入购物车！');
        $('.cart-info-count').html(data.cartgoods.length+' 种商品');
        $('.cart-info-value').html('&yen; '+data.totalMoney);
        var carHtml="";
        var goodsImg="";
        var val=data.cartgoods;
        for(var i=0,cartHtml="",goodsImg=""; i<val.length;i++){
          var goodsImg=val[i]['goodsImg']?val[i]['goodsImg']:'<{$COMMON.goodsImage}>';
          cartHtml+='<li>';
          cartHtml+='<a href="item.html">';
          cartHtml+='<img src="__UPLOAD__/'+goodsImg+'" alt="'+val[i]['goodsName']+'" width="37" height="34"></a>';
          cartHtml+=' <span class="cart-content-count">x '+val[i]['cnt']+'</span>';
          cartHtml+='<strong><a href="item.html">'+val[i]['goodsName']+'</a></strong><em>&yen; '+val[i]['cnt']*val[i]['shopPrice']+'</em>';
          cartHtml+='<a href="javascript:void(0);"  onclick="delCartGoods(<{$val['goodsId']}>,<{$val['goodsAttrId']|default=0}>,this)" class="del-goods"><i class="fa fa-times"></i></a>';              
          cartHtml+='</li>';     
        }
        $('.cart-content .scroller').html(cartHtml);
      }
    });


  }
  </script>
</block>
<block name="initJS">
	Index.initLayerSlider();
</block>
<block name="breadcrumb"></block>
<block name="mainTop">
	<div class="row margin-bottom-40">
          <!-- BEGIN SALE PRODUCT -->
          <div class="col-md-12 sale-product">
            <h2>新品上市</h2>
            <div class="bxslider-wrapper">
              <ul class="bxslider" data-slides-phone="1" data-slides-tablet="2" data-slides-desktop="5" data-slide-margin="15">
              	<foreach name="newGoods" item="val" key="key">
                <li>
                  <div class="product-item">
                    <div class="pi-img-wrapper">
                      <img src="__UPLOAD__/<{$val['goodsImg']?$val['goodsImg']:$COMMON.goodsImage}>" class="img-responsive" alt="<{$val['goodsName']}>">
                      <div>
                        <a href="__UPLOAD__/<{$val['goodsImg']?$val['goodsImg']:$COMMON.goodsImage}>" class="btn btn-default fancybox-button">大图</a>
                        <a href="#product-pop-up-<{$key}>" class="btn btn-default fancybox-fast-view">预览</a>
                      </div>
                    </div>
                    <h3><a href="<{:U('Index/item',array('goodsId'=>$val['goodsId']))}>"><{$val['goodsName']|mb_substr=###,0,16,'utf-8'}></a></h3>
                    <div class="pi-price">&yen; <{$val['shopPrice']}></div>
                    <a href="javascript:void(0)" onclick="addToCart(<{$val['goodsId']}>,<{$val['goodsAttrId']|default=0}>)" class="btn btn-default add2cart">加入购物车</a>
                    <div class="sticker sticker-sale"></div>
                  </div>
                </li>
         	</foreach>
              </ul>
            </div>
          </div>
          <!-- END SALE PRODUCT -->
        </div>

</block>
<block name="side">
<ul class="list-group margin-bottom-25 sidebar-menu">
<{$tree}>
</ul>
</block>
<block name="page">
	<h2>商城精品</h2>
            <div class="bxslider-wrapper">
              <ul class="bxslider" data-slides-phone="1" data-slides-tablet="2" data-slides-desktop="3" data-slide-margin="15">
              <foreach name="newGoods" item="val" key="key">
                <li>
                  <div class="product-item">
                    <div class="pi-img-wrapper">
                      <img src="__UPLOAD__/<{$val['goodsImg']?$val['goodsImg']:$COMMON.goodsImage}>" class="img-responsive" alt="<{$val['goodsName']}>">
                      <div>
                        <a href="__UPLOAD__/<{$val['goodsImg']?$val['goodsImg']:$COMMON.goodsImage}>" class="btn btn-default fancybox-button">大图</a>
                        <a href="#product-pop-up-<{$key}>" class="btn btn-default fancybox-fast-view">预览</a>
                      </div>
                    </div>
                    <h3><a href="<{:U('Index/item',array('goodsId'=>$val['goodsId']))}>"><{$val['goodsName']|mb_substr=###,0,16,'utf-8'}></a></h3>
                    <div class="pi-price">&yen; <{$val['shopPrice']}></div>
                    <a href="javascript:void(0)" onclick="addToCart(<{$val['goodsId']}>,<{$val['goodsAttrId']|default=0}>)" class="btn btn-default add2cart">加入购物车</a>
                    <div class="sticker sticker-new"></div>
                  </div>
                </li>
                </foreach>
              </ul>
            </div>
</block>

<block name="view">
  <foreach name="newGoods" item="val" key="key">
  <div id="product-pop-up-<{$key}>" style="display: none; width: 700px;">
            <div class="product-page product-pop-up">
              <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-3">
                  <div class="product-main-image">
                    <img src="__UPLOAD__/<{$val['goodsImg']?$val['goodsImg']:$COMMON.goodsImage}>" alt="<{$val['goodsName']}>" class="img-responsive">
                  </div>
                  <div class="product-other-images">
                    <foreach name="val.gallery" item="v" key="k">
                    <a href="javascript:void(0);" onclick="tog(this)"><img alt="<{$v['goodsName']}>" src="__UPLOAD__/<{$v['goodsImg']}>"></a>
                    </foreach>
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-9">
                  <h1><{$val['goodsName']|mb_substr=###,0,16,'utf-8'}></h1>
                  <div class="price-availability-block clearfix">
                    <div class="price">
                      <strong><span>&yen;</span><{$val['shopPrice']}></strong>
                      <em>&yen;<span><{$val['marketPrice']}></span></em>
                    </div>
                    <div class="availability">
                      Availability: <strong>In Stock</strong>
                    </div>
                  </div>
                  <div class="description">
                    <p>Lorem ipsum dolor ut sit ame dolore  adipiscing elit, sed nonumy nibh sed euismod laoreet dolore magna aliquarm erat volutpat 
Nostrud duis molestie at dolore.</p>
                  </div>
                  <div class="product-page-options">
                    <div class="pull-left">
                      <label class="control-label">Size:</label>
                      <select class="form-control input-sm">
                        <option>L</option>
                        <option>M</option>
                        <option>XL</option>
                      </select>
                    </div>
                    <div class="pull-left">
                      <label class="control-label">Color:</label>
                      <select class="form-control input-sm">
                        <option>Red</option>
                        <option>Blue</option>
                        <option>Black</option>
                      </select>
                    </div>
                  </div>
                  <div class="product-page-cart">
                    <div class="product-quantity">
                        <input id="product-quantity" type="text" value="1" readonly name="product-quantity" class="form-control input-sm">
                    </div>
                    <button class="btn btn-primary"  onclick="addToCart(<{$val['goodsId']}>,<{$val['goodsAttrId']|default=0}>)" type="submit">加入购物车</button>
                    <button class="btn btn-default" onclick="location.href='<{:U('Index/item',array('goodsId'=>$val['goodsId']))}>'" type="submit">商品详情</button>
                  </div>
                </div>

                <div class="sticker sticker-sale"></div>
              </div>
            </div>
    </div>
    </foreach>
</block>
<block name="mainBottom">	
<div class="row margin-bottom-35 ">
          <!-- BEGIN TWO PRODUCTS -->
          <div class="col-md-6 two-items-bottom-items">
            <h2>Two items</h2>
            <div class="bxslider-wrapper">
              <ul class="bxslider" data-slides-phone="1" data-slides-tablet="2" data-slides-desktop="2" data-slide-margin="15">
                <foreach name="newGoods" item="val" key="key">
                <li>
                  <div class="product-item">
                    <div class="pi-img-wrapper">
                      <img src="__UPLOAD__/<{$val['goodsImg']?$val['goodsImg']:$COMMON.goodsImage}>" class="img-responsive" alt="<{$val['goodsName']}>">
                      <div>
                        <a href="__UPLOAD__/<{$val['goodsImg']?$val['goodsImg']:$COMMON.goodsImage}>" class="btn btn-default fancybox-button">大图</a>
                        <a href="#product-pop-up-<{$key}>" class="btn btn-default fancybox-fast-view">预览</a>
                      </div>
                    </div>
                    <h3><a href="<{:U('Index/item',array('goodsId'=>$val['goodsId']))}>"><{$val['goodsName']|mb_substr=###,0,16,'utf-8'}></a></h3>
                    <div class="pi-price">&yen; <{$val['shopPrice']}></div>
                    <a href="javascript:void(0)" onclick="addToCart(<{$val['goodsId']}>,<{$val['goodsAttrId']|default=0}>)" class="btn btn-default add2cart">加入购物车</a>
                    <div class="sticker sticker-new"></div>
                  </div>
                </li>
                </foreach>
              </ul>
            </div>
          </div>
          <!-- END TWO PRODUCTS -->
          <!-- BEGIN PROMO -->
          <div class="col-md-6">
            <div class="content-slider">
              <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                	<foreach name="newGoods" item="val" key="key">
                  <if condition="$key lt 5">
                  <li data-target="#myCarousel" data-slide-to="<{$key}>" <if condition="$key eq 0">class="active"</if>></li>
                  </if>
                  </foreach>
                </ol>
                <div class="carousel-inner">
                	<foreach name="newGoods" item="val" key="key">
                  <if condition="$key lt 5">
                  <div class="item <if condition="$key eq 0">active</if>" style="height:463px;overflow:hidden">
                    <img src="__UPLOAD__/<{$val['goodsImg']?$val['goodsImg']:$COMMON.goodsImage}>" class="img-responsive" alt="<{$val['goodsName']}>">
                  </div>
                  </if>
                  </foreach>
                </div>
              </div>
            </div>
          </div>
          <!-- END PROMO -->
        </div> 	
</block>
<block name="banner">

    <div class="page-slider margin-bottom-35">
      <!--LayerSlider begin-->
      <div id="layerslider" style="width: 100%; height: 494px; margin: 0 auto;">
          <!--LayerSlider layer-->
          <div class="ls-layer ls-layer1" style="slidedirection: right; transition2d: 24,25,27,28; ">
            <img src="__PUBLIC__/Home/temp/sliders/slide1/bg.jpg" class="ls-bg" alt="Slide background">
            <div class="ls-s-1 title" style=" top: 96px; left: 35%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
              Tones of <strong>shop UI features</strong> designed
            </div>
            <div class="ls-s-1 mini-text" style=" top: 338px; left: 35%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; showuntil : 4000; white-space: nowrap;">
              Lorem ipsum dolor sit amet  constectetuer diam<br > adipiscing elit euismod ut laoreet dolore.
            </div>
          </div>

          <!--LayerSlider layer-->
          <div class="ls-layer ls-layer2" style="slidedirection: right; transition2d: 110,111,112,113; ">
            <img src="__PUBLIC__/Home/temp/sliders/slide2/bg.jpg" class="ls-bg" alt="Slide background">
            <div class="ls-s-1 ls-title title" style=" top: 40%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
              <strong class="title">Unlimted</strong>
              Layout Options
              <em class="title">Fully Responsive</em>
            </div>

            <div class="ls-s-2 ls-price title" style=" top: 50%; left: 45%; slidedirection : fade; slideoutdirection : fade; durationout : 109750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap;">
              <b>from</b>
              <strong><span>&yen;</span>25</strong>
            </div>

            <a href="#" class="ls-s-1 ls-more mini-text" style=" top: 72%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; display: inline-block; white-space: nowrap;">
              See More Details
            </a>
          </div>

          <!--LayerSlider layer-->
          <div class="ls-layer ls-layer3" style="slidedirection: right; transition2d: 92,93,105; ">
            <img src="__PUBLIC__/Home/temp/sliders/slide3/bg.jpg" class="ls-bg" alt="Slide background">

            <div class="ls-s-1 ls-title" style=" top: 83px; left: 33%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
              Full Admin & Frontend
              <strong>eCommerce UI</strong>
              Is Ready For Your Project
            </div>

            <div class="ls-s-1" style=" top: 333px; left: 33%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap; font-size: 20px; font: 20px 'Open Sans Light', sans-serif;">
              <a href="#" class="ls-buy">
                立即购买!
              </a>
              <div class="ls-price">
                <span>仅售:</span>
                <strong>25<sup>&yen;</sup></strong>
              </div>
            </div>
          </div>

          <!--LayerSlider layer-->
          <div class="ls-layer ls-layer5" style="slidedirection: right; transition2d: 110,111,112,113; ">
            <img src="__PUBLIC__/Home/temp/sliders/slide5/bg.jpg" class="ls-bg" alt="Slide background">

            <div class="ls-s-1 title" style=" top: 35%; left: 60%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
              The most<br>
              钻石精品
            </div>

            <div class="ls-s-1 mini-text" style=" top: 70%; left: 60%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap;">
              <span>Lorem ipsum and</span>
              <a href="#">立即购买!</a>
            </div>
          </div>
      </div>
      <!--LayerSlider end-->
    </div>
</block>